<template>
	<div class="pages page">
         <HeaderTop :title="name"/>
		
        <div class="topImage">
            <img :src="image_banner" >
        </div>
        <div class="list" >
            <div class="li" v-for="item in list" >
                <img :src="item.image" >
                <span>{{item.name}}</span>
            </div>
        </div>
        <div class="mapContain">
            <div class="title">服务网点</div>
        </div>
	</div>
</template>

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
	export default {
            data(){
                return {
                    name:"服务站",
                    image_banner:require('../../pages/service/images/gz.95de8a88.jpg'),
                    list:[{image:require('../../pages/service/images/fwz_fwbx@3x.597dbc35.png'),name:"房屋报修"},{image:require('../../pages/service/images/fwz_tsjy@3x.b84f1593.png'),name:"投诉建议"}]
                }
            },
            components:{
                HeaderTop
            }
	}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixins.styl"
 
.pages   
  .topImage
     display block   
     width 345px
     margin 0  auto  
    img
     width 100%
     height 100%
   .list
     display flex
     flex-direction row
     justify-content space-between
     margin 10px auto
     width 200px
     height 100px
     align-items center
     color #4B4B4B
     .li
      display flex
      flex-direction column
      align-items center
     img
      width 40px
      height 40px
     span
       font-size 14px
       margin-top 5px
   .mapContain    
     padding-left 15px
     .title
        font-weight: bolder;
        font-size: 19px;
</style>
